<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06.指令语法-on</title>
    </head>
    <body>
        <div id="app">
            <!-- v-on 完整用法 -->
            <button v-on:click="handleClick">按钮</button>
            <div
            style="width: 100px;height: 100px;background-color: aqua;"
            v-on:mousemove="handleMove"></div>
            <input type="text" v-on:input="handleInput" />
            <!-- v-on 简写方式 -->
            <hr />
            <button @click="handleClick">按钮</button>
            <div
            style="width: 100px; height: 100px; background-color: aqua;"
            @mousemove="handleMove"></div>

            <input type="text" @input+'handleInput' />
            <hr />
            <!-- 给事件回调函数传递参数 -->
            <!-- 1.直接写回调函数 参数:event -->
            <button @click="handleClick">按钮</button>
            <!-- 2.写函数调用传参形式,参数:就是你传递参数 -->
            <div
            style="width: 100px; height: 100px; background-color: aqua;"
            @mousemove="handleMove(1,'jack',false,{name:'rose'})"
            ></div>
            <!-- 3.如果需要event参数 需要传递$event -->
            <input type="text"
            @input="handleInput(1,'jack',false,{name:'rose'},$event)" 
            />
        </div>

        <script>
            /**
             * 绑定事件指令 v-on
             * 语法:v-on:事件名='事件回调函数' => 简写 @事件名='事件回调函数'
             * 事件回调函数需要在methods中定义
             * 
             * 回调函数参数:
             * 1.如果不需要参数或只需要event参数,直接写回调函数@click='handler'
             * 2.如果需要其他参数@click='handler(1,2,3)'
             * 3.如果需要其他参数和event参数@click='handler($event,1,2,3)'
             * 
             * 事件修饰符
             * .prevent 阻止默认行为
             * .stop 阻止事件冒泡
             * 
             * 按键修饰符
             * .keyCode .13 回车
             * .keyName .enter
            */
           const vm = new Vue({
            //new Vue传递的是配置对象
            //所谓配置对象:属性名固定的对象 写了准确的属性名能起到相应的作用 随便写或写错等于没写
            //非函数数据定义在data中
            data:{
                //new Vue会进行数据代理 会将data中的数据 methods中的方法 拿到this上(可以通过this使用)
                //可以通过this直接访问data中数据和methods中方法(让访问数据更加简单)
                num:0,
            },
            //函数数据定义在methods中
            methods:{
                handleClick(){
                    console.log('hello 花',arguments);
                },
                handleMove(){
                    console.log('move',arguments);
                },
                handleInput(){
                    //this指向实例对象
                    console.log('input',arguments);
                },
                updatedNum() {
                    // this指向实例对象
                    // console.log(this);
                    //****箭头函数没有自己的this,所以指向window (不是我们想要的)
                    this.num++;
                },
                login(e){
                    console.log('login');
                    // e.preventDefault();组织默认行为
                    
                },
                link(e){

                },
                handleKeyUp(e){
                    // if(e.keyCode === 13){}
                    console.log('enter');
                },
            },
           });

           vm.$mount('#app');
        </script>
    </body>
</html>